<template>
	<swiper
		:style="{ '--color': vuex_config.themeColor1 }"
		v-if="dataList.length > 0"
		@touchmove="stopMove"
		class="part_box"
		vertical
		circular
		:display-multiple-items="5"
		:autoplay="true"
		:interval="1000"
	>
		<swiper-item class="recor_item" v-for="(item, index) in dataList" :key="index">
			<view class="nick_name">{{ item.name }}</view>
			<view class="time">{{ item.phone | phoneFilter() }}</view>
			<view class="time">{{ item.date_creation | formatTime() }}</view>
			<view class="ri-text">参与了活动</view>
		</swiper-item>
		<template v-if="dataList.length < 5">
			<swiper-item class="result-item" v-for="(item, index) in 5 - dataList.length" :key="indexobj[index]"></swiper-item>
		</template>
	</swiper>
</template>

<script>
import { formatDate } from '@/utils/moment/index.js';
export default {
	props: {
		dataList: {
			type: Array,
			default: []
		}
	},
	data() {
		return {
			indexobj:{
				0:'a0',
				1:'a1',
				2:'a2',
				3:'a3',
				4:'a4',
			}
		};
	},
	filters: {
		formatTime(val) {
			return formatDate(val, 'YYYY-MM-DD HH:mm');
		},
		phoneFilter (str) {
			return '***' + str.substring(7)
		}
	},
	mounted() {},
	methods: {
		stopMove() {
			return false;
		}
	}
};
</script>

<style scoped lang="scss">
.part_box {
	background-color: #fff;
	padding: 20rpx 16rpx;
	height: 280rpx;
	.recor_item {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #333;
		.headimg {
			width: 40rpx;
			height: 40rpx;
			overflow: hidden;
			border-radius: 50%;
			margin-right: 16rpx;
		}
		.nick_name {
			color: var(--color);
			flex: 1;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.time {
			margin: 0 10rpx;
		}
		.ri-text {
			line-height: 40rpx;
		}
	}
}
</style>
